<template>
  <div class="center" id="size">
    <h1>登录/注册</h1>
    <div class="logon">
      <div :class="overlaylong">
        <div class="overlaylong-Signin" v-if="disfiex == 0">
          <h2 class="overlaylongH2">登录</h2>
          <input type="text" placeholder="用户名" v-model="user.accountid">
          <input type="password" placeholder="密码" v-model="user.accountpassword"  >
          <select v-model="user.role" @change="validateRole">
              <option value="普通用户">用户</option>
              <option value="超级管理员">管理员</option>
            </select>
          <h3>忘记密码？</h3>
          <button class="inupbutton" @click="login()">登录</button>
        </div>
        <div class="overlaylong-Signup" v-if="disfiex == 1">
          <h2 class="overlaylongH2">注册账户</h2>
          <input type="text" placeholder="请输入姓名" v-model="addUser.realName" >
          <input type="text" placeholder="请设置账号" v-model="addUser.accountId" >
          <input type="password" placeholder="请设置密码" v-model="addUser.password">
          <input type="number" placeholder="请输入年龄" v-model="addUser.age" >
          <input type="text" placeholder="请输入手机号" v-model="addUser.phoneCode">
          <input type="text" placeholder="选填您的驾照" v-model="addUser.drivingLicense">
          <button class="inupbutton" @click="register" :disabled="!isSignupValid">注册</button>
        </div>
      </div>
      <div :class="overlaytitle">
        <div class="overlaytitle-Signin" v-if="disfiex == 0">
          <h2 class="overlaytitleH2">你好，朋友！</h2>
          <p class="overlaytitleP">输入您的个人信息并开始与我们一起的旅程</p>
          <div class="buttongohs" @click="Signin">注册</div>
        </div>
        <div class="overlaytitle-Signup" v-if="disfiex == 1">
          <h2 class="overlaytitleH2">欢迎回来！</h2>
          <p class="overlaytitleP">为了保持联系，请使用您的个人信息登录</p>
          <div class="buttongohs" @click="Signup">登录</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      user: {
        accountid: "",
        accountpassword: "",
        role:"请选择",
      },
      addUser: {
        realName: '',
        password: '',
        age: '',
        phoneCode: '',
        accountId: '',
        drivingLicense: '',
      },
      overlaylong: 'overlaylong',
      overlaytitle: 'overlaytitle',
      disfiex: 0
    }
  },
  methods: {
    // userRegex() {
    //   const userRegex = /^1\d{10}$/;
    //   this.ispwd = userRegex.test(this.user.accountid);
    //   if (!this.ispwd) {
    //     alert("账号格式有误");
    //   }
    // },

    // password() {
    //   const pwdRex = /[a-z]/;
    //   this.isValid = pwdRex.test(this.user.accountpassword);
    //   if (!this.isValid) {
    //     alert("密码格式有误");
    //   }
    // },

    // validateRealName() {
    //   const nameRegex = /^.{2,4}$/; // 2到4个字符
    //   this.isSignupValid = nameRegex.test(this.addUser.realName);
    //   if (!this.isSignupValid) {
    //     alert("姓名必须是2到4个字符");
    //   }
    // },

    // validateAccountId() {
    //   const accountRegex = /^1\d{10}$/; // 8到11个字符
    //   this.isSignupValid = accountRegex.test(this.addUser.accountId);
    //   if (!this.isSignupValid) {
    //     alert("账号必须是8到11位");
    //   }
    // },

    // validatePassword() {
    //   const pwdRex = /[1-6]/; // 至少一个小写字母
    //   this.isSignupValid = pwdRex.test(this.addUser.password);
    //   if (!this.isSignupValid) {
    //     alert("密码必须包含至少一个小写字母");
    //   }
    // },

    // validateAge() {
    //   const age = parseInt(this.addUser.age);
    //   this.isSignupValid = age > 18 && age < 60; // 年龄大于18且小于60
    //   if (!this.isSignupValid) {
    //     alert("年龄必须大于18岁且小于60岁");
    //   }
    // },

    // validateDrivingLicense() {
    //   if (this.addUser.drivingLicense) {
    //     const licenseRegex = /^[ABC]$/; // 仅允许 A、B 或 C
    //     const isValidLicense = licenseRegex.test(this.addUser.drivingLicense);
    //     if (!isValidLicense) {
    //       alert("驾照格式有误，仅能为 A、B 或 C");
    //     }
    //   }
    // },

    login() {
        this.$http.post('/userInfo/login', this.user).then(resp => {
          console.log(resp);
          alert("登录成功");
            if(resp.data.code==200){
              if(resp.data.data.roleName=="超级管理员"){
                  this.$router.push("/AdminPage");
              }else if(resp.data.data.roleName=="普通用户"){
                 this.$router.push("/UserHomepage");
              }else if(resp.data.data.roleName=="管理员"){
                 this.$router.push("/AdminPage");
              }
          }

        }).catch(error => {
          console.error("请求失败:", error);
          alert("登录请求失败，请稍后再试。");
        });

    },

    register() {
      if (this.isSignupValid) {
        this.$http.post('/User/addUser', {
          realName: this.addUser.realName,
          accountId: this.addUser.accountId,
          password: this.addUser.password,
          age: this.addUser.age,
          phoneCode: this.addUser.phoneCode,
          drivingLicense: this.addUser.drivingLicense,
        }).then(resp => {
          alert("注册成功");
          console.log(resp);
          this.Signin(); // 注册成功后切换到登录界面
        }).catch(err => {
          alert("注册失败，请重试");
          console.error(err);
        });
        }
    },

    Signin() {
      this.overlaylong = "overlaylongleft";
      this.overlaytitle = "overlaytitleright";
      setTimeout(() => {
        this.disfiex = 1;
      }, 200);
    },

    Signup() {
      this.overlaylong = "overlaylongright";
      this.overlaytitle = "overlaytitleleft";
      setTimeout(() => {
        this.disfiex = 0;
      }, 200);
    }
  }
}
</script>

<style>
.center {
  width: 100vw;
  height: 100vh;
  background-image:url(../../static/Image/img102.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

h1 {
  font-size: 2vw;
  color: black;
}

.logon {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  width: 80vw;
  max-width: 768px;
  min-height: 480px;
  margin-top: 20px;
  display: flex;
  background: linear-gradient(to right, #4284db, #29eac4);
}

.overlaylong, .overlaylongleft, .overlaylongright {
  border-radius: 10px 0 0 10px;
  width: 50%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s ease-in-out;
}

.overlaylongleft {
  transform: translateX(100%);
}

.overlaylongright {
  transform: translateX(0%);
}

.overlaytitle, .overlaytitleleft, .overlaytitleright {
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s ease-in-out;
}

.overlaytitleleft {
  transform: translateX(0%);
}

.overlaytitleright {
  transform: translateX(-100%);
}

.overlaytitleH2 {
  font-size: 2vw;
  color: #fff;
  margin-top: 20px;
}

.overlaytitleP {
  font-size: 1vw;
  color: #fff;
  margin-top: 20px;
}

.buttongohs {
  width: 180px;
  height: 40px;
  border-radius: 50px;
  border: 1px solid #fff;
  color: #fff;
  font-size: 1vw;
  text-align: center;
  line-height: 40px;
  margin-top: 40px;
  cursor: pointer;
}

.overlaylongH2 {
  font-size: 1.5vw;
  color: black;
}

input {
  background-color: #eee;
  border: none;
  padding: 12px 15px;
  margin: 10px 0;
  width: 240px;
}

h3 {
  font-size: 0.8vw;
  margin-top: 10px;
  cursor: pointer;
}

.inupbutton {
  background-color: #29eac4;
  border: none;
  width: 180px;
  height: 40px;
  border-radius: 50px;
  font-size: 1vw;
  color: #fff;
  text-align: center;
  line-height: 40px;
  margin-top: 30px;
  cursor: pointer;
}
select {
  background-color: #eee;
  border: none;
  padding: 12px 15px;
  margin: 10px 0;
  width: 240px;
}
</style>
